<template>
  <div class="main_box" style="padding:10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">{{ dataInfo.equipName }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info1">
          <el-row class="header-info">
            <el-col class="header-img__wrapper">
              <div>
                <img title="点击下载图片" @click="downloadByBlob(dataInfo.wxAppUrl, '血压仪二维码')" :src="dataInfo.wxAppUrl"
                  width="170px" style="cursor:pointer" />
              </div>
            </el-col>
            <el-col class="text-info">
              <el-col>
                <el-col>血压仪编号:</el-col>
                <el-col>{{ dataInfo.equipCode }}</el-col>
              </el-col>
              <el-col>
                <el-col>血压仪昵称:</el-col>
                <el-col>{{ dataInfo.equipNickName }}</el-col>
              </el-col>
              <el-col>
                <el-col>MAC地址:</el-col>
                <el-col>{{ dataInfo.equipMac }}</el-col>
              </el-col>
              <el-col>
                <el-col>呼叫器:</el-col>
                <el-col>{{ dataInfo.beeperName }}</el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="body-card">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="基本信息" name="userInfo">
          <el-form>
            <el-row>
              <el-form-item label="血压仪类型:">
                <span>{{ formatPressureType(dataInfo.pressureType) }}</span>
              </el-form-item>
              <el-form-item label="安装区域:">
                <span>{{ dataInfo.installArea }}</span>
              </el-form-item>
              <el-form-item label="厂家:">
                <span>{{ dataInfo.factoryName }}</span>
              </el-form-item>
              <el-form-item label="创建人:">
              <span>{{ dataInfo.createUserName }}</span>
            </el-form-item>
            <el-form-item label="创建时间:">
              <span>{{ dataInfo.createDate }}</span>
            </el-form-item>
            <el-form-item label="修改人:">
              <span>{{ dataInfo.modifyUserName }}</span>
            </el-form-item>
            <el-form-item label="修改时间:">
              <span>{{ dataInfo.modifyDate }}</span>
            </el-form-item>
            <el-form-item label="备注:">
              <span>{{ dataInfo.remark }}</span>
            </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="检测记录" name="heartBeat">
          <el-table
              :data="detection.list"
              border
              :fit="true"
              highlight-current-row
              max-height="600"
              style="margin-bottom: 0;"
            >
              <el-table-column
                type="index"
                label="序号"
                align="center"
                width="100px"
              >
              </el-table-column>
              <el-table-column
                label="编号"
                prop="id"
                align="center"
                width="160"
              ></el-table-column>
              <el-table-column
                label="检测时间"
                prop="createTime"
                align="center"
                width="200"
              ></el-table-column>
              <el-table-column label="血压" align="center">
                <template slot-scope="{ row }">
                  <div>
                    {{ row.bpIndicatorResult + row.bpIndicatorUnits }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="脉搏" align="center">
                <template slot-scope="{ row }">
                  <div>
                      {{row.pindicatorResult+row.pindicatorUnits}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="收缩压" align="center">
                <template slot-scope="{ row }">
                  <div>
                    {{ row.sbpIndicatorResult + row.sbpIndicatorUnits }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="舒张压" align="center">
                <template slot-scope="{ row }">
                  <div>
                    {{ row.dbpIndicatorResult + row.dbpIndicatorUnits }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @size-change="handleDetectionSizeChange"
              @current-change="handleDetectionCurrentChange"
              :current-page="detection.pageNo"
              :page-sizes="[20, 50, 100]"
              :page-size="detection.pageSize"
              layout="total, sizes, jumper, next, pager, prev"
              :total="detection.total"
            ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import PressureApi from "@/api/equip/pressure";
import BeeperApi from "@/api/equip/beeper";
export default {
  data() {
    return {
      dataInfo: {},
      detection: {
        list: [],
        pageNo: 1,
        pageSize: 1,
        total: 1
      },
      activeName: 'userInfo'
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    tabClick(tab, event) {
      this.activeName = tab.name;
    },
    getData() {
      PressureApi.getPressureInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data;
        console.log(res.data);
        this.getDetectionList();
      });
    },
    handleDetectionSizeChange(size) {
      this.detection.pageSize = size;
      this.getDetectionList();
    },
    handleDetectionCurrentChange(val) {
      this.detection.pageNo = val;
      this.getDetectionList();
    },
    async getDetectionList() {
      const {
        dataInfo: { equipMac },
        detection: { pageNo, pageSize }
      } = this;
      const params = {
        sn: equipMac,
        current: pageNo,
        size: pageSize
      };
      const { data, total } = await PressureApi.getPressureDetectionList(params);
      this.detection.list = data;
      this.detection.total = total;
    },
    download(href, name) {
      let eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },
    downloadByBlob(url, name) {
      let image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob(blob => {
          let url = URL.createObjectURL(blob);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },
    formatEquipState(cellValue) {
      if (cellValue === 0) {
        return "未开通";
      } else if (cellValue === 1) {
        return "未激活";
      } else if (cellValue === 2) {
        return "在线";
      } else if (cellValue === 3) {
        return "离线";
      }
    },
    formatPressureType(cellValue) {
      if (cellValue === 1) {
        return "NB-IoT";
      } else if (cellValue === 2) {
        return "WIFI";
      } else if (cellValue === 3) {
        return "网关";
      }
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/equip/pressureManagement" });
    }
  }
};
</script>
<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>
<style lang="scss" >
@import "@/assets/css/views/content.scss"
</style>
